import VueRouter from "vue-router";
import Vue from "vue";
// 路由 -》 page 页面级别
import Home from "../views/Home.vue";
import Details from "../views/Details.vue";
// import DetailsA from "../views/DetailsA.vue";
import User from "../views/User.vue";
import Foo from "../components/Foo.vue";
import Bar from "../components/Bar.vue";

console.log(VueRouter);

// use  -> koa -> 安装插件（中间件） -> 函数
Vue.use(VueRouter);

// 1. 建立 url 和组件之间的映射关系
// url -> 组件
// /about -> About 组件
// /      -> Home 组件

// 有没有告诉框架 我们要在哪里显示啊？
// 2. 定义渲染出口

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      alias: "/jia",
      //   component: Home,
      components: {
        default: Home,
        main: Foo,
        footer: Bar,
      },
      children: [
        {
          path: "foo",
          component: Foo,
        },
        {
          path: "bar",
          component: Bar,
        },
      ],
      // eslint-disable-next-line no-unused-vars
      beforeEnter(to, form, next) {
        console.log("before enter");
        console.log(to);
        console.log(form);
        next();
      },
    },
    {
      // path 很有可能会变更的
      // ren -> name
      // 每天传的衣服 -》 红色 绿色
      path: "/details/:id",
      name: "Details",
      component: Details,
      props: (route) => {
        console.log(route);
        // 给它加点信息
        return {
          id: route.params.id + ":test props function",
        };
      },
    },
    // {
    //   path: "/details/123",
    //   component: DetailsA,
    // },
    {
      path: "/user/:name",
      component: User,
    },
  ],
});

// eslint-disable-next-line no-unused-vars
router.beforeEach((to, form, next) => {
  console.log("before each");

  // 鉴权
  console.log(to);
  console.log(form);
  // koa -> next
  next();
});

router.afterEach((to, from) => {
  console.log("after - each");
  console.log(to, from);
});

export default router;
